<template>
  <el-row class="backGru" :style="{backgroundImage: `url(${backImag})`}" >
    <el-card class="card" shadow="hover" >
      <h1 style="margin: auto;">云水湾旅游景区
        <el-button  type="text"  class="btn" @click="$router.replace('/homepage')">退出</el-button>
      </h1>

      <Component :queryPath="queryPath" :is="formType" @back="backLogin"/>
      <div v-if="this.formType==='loginForm'">
      <el-button  type="text" @click="registerHandle">注册</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button type="text" @click="findPassword">找回密码</el-button>
      </div>
    </el-card>
  </el-row>
</template>

<script>
import backImage from '@/assets/login.jpg'
import loginForm from "@/views/loginAndRegister/components/loginForm";
import registerForm from "@/views/loginAndRegister/components/registerForm";
import forgetPassword from "@/views/loginAndRegister/components/forgetPassword";
export default{
  name:'LoginAndRegister',
  components:{loginForm,registerForm,forgetPassword,},
  props:['queryPath'],
  data(){
    return {
      backImag:backImage,
      formType:'loginForm'
    }
  },
  unmounted() {
    if (this.$websocket.ws)
    this.$websocket.ws.close()
  },
  methods:{
    findPassword(){
      this.formType='forgetPassword'
    },
    registerHandle(){
      this.formType='registerForm'
    },
    backLogin(){
      this.formType='loginForm'
    }
  }
}
</script>

<style lang="less">
@all-width:350px;
.backGru{
  overflow: auto;
  background-size: cover;
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.btn{

  color: #477bff;
}
.card{
  display: flex;
  justify-content: center;
  right: 60px;
  min-height: 380px;
  opacity: 0.85;
}
.el-input-my{
  width: @all-width;
}
.login-button{
  width: @all-width;
  &:hover{
    box-shadow: 0 1px 1px 1px #DCDFE6;
    background-color: #3dbbff;
  }
  .form{
    height: 200px;
    justify-content: center;
  }
}

</style>
